<template>
  <div>
    <section class="portfolio-filter section type2">
        <ul class="nav nav-pills">
            <li v-for="(section, index) in sections" :class="{active: isActive === index}" @click="changeClass(index)">
              <a href="#" data-filter=".artwork">{{section.name}}</a>
            </li>
        </ul>
    </section>
    <zones :title="sections[isActive].name"/>
  </div>
</template>

<script>
import zones from './zone'
import {getSection} from '@/api/section'
export default {
  //导出名称为postSection
  name: "postSection",
  components: {
    //包含组件zones
    zones
  },
  data() {
      return {
          isActive: 0,
          sections: []
      }
  },
  created() {
    //创建的时候初始化section
    this.initSection()
  },
  methods: {
    //用来标记哪个版块被选中
    changeClass(index) {
      this.isActive = index;
    },
    initSection() {
      //使用api的getSection函数
      getSection().then(response => {
        this.sections = response.data;
      })
    }
  }
}
</script>